import G6 from '@antv/g6';

export class RelationshipDiagram {
    render() {
        G6.registerNode('root', {
          draw: (cfg, group) => {
            const size = [80, 50];
            const keyShape = group.addShape('rect', {
              attrs: {
                width: size[0],
                height: size[1],
                x: -size[0] / 2,
                y: -size[1] / 2,
                fill: 'green',
                radius: 4,
                shadowOffsetX: 4,
                shadowOffsetY: 4,
                shadowColor: '#eee',
                shadowBlur: 4,
              },
              draggable: true,
              name: 'root-keyshape'
            });
            group.addShape('rect', {
              attrs: {
                fill: '#fff',
                width: size[0],
                height: size[1]/4,
                x: -size[0] / 2,
                y: -size[1] / 2,
                radius: [4, 4, 0, 0]
              },
              draggable: true,
              name: 'ratio-shape'
            });
            group.addShape('text', {
              attrs: {
                text: `字段：${cfg.filed}`,
                fill: '#000',
                fontSize: 6,
                x: -35,
                y: -15,
              },
              draggable: true,
              name: 'label-shape'
            });
            group.addShape('text', {
              attrs: {
                text: `${cfg.content}\n${cfg.content}1`,
                fill: '#fff',
                fontSize: 6,
                x: -35,
                y: 8,
              },
              draggable: true,
              name: 'label-shape2'
            });
            group.addShape('text', {
              attrs: {
                text: `${cfg.label}`,
                fill: '#fff',
                fontSize: 7,
                x: -35,
                y: 20,
              },
              draggable: true,
              name: 'label-shape1'
            });
            group.addShape('image', {
              attrs: {
                width: 10,
                height:10,
                x: 24,
                y: -8,
                img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
              },
              // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
              name: 'image-shape',
            });
            return keyShape;
          }
        });
        
        // level1 node level1node
        G6.registerNode('level1node', {
          draw: (cfg, group) => {
            const size = [80, 40];
            const keyShape = group.addShape('rect', {
              attrs: {
                width: size[0],
                height: size[1],
                x: -size[0] / 2,
                y: -size[1] / 2,
                fill: 'green',
                radius: 4,
                shadowOffsetX: 4,
                shadowOffsetY: 4,
                shadowColor: '#eee',
                shadowBlur: 4,
              },
              draggable: true,
              name: 'root-keyshape'
            });
            group.addShape('rect', {
              attrs: {
                fill: '#fff',
                width: size[0],
                height: size[1]/4,
                x: -size[0] / 2,
                y: -size[1] / 2,
                radius: [4, 4, 0, 0]
              },
              draggable: true,
              name: 'ratio-shape'
            });
            group.addShape('text', {
              attrs: {
                text: `字段：${cfg.filed}`,
                fill: '#000',
                fontSize: 6,
                x: -35,
                y: -12,
              },
              draggable: true,
              name: 'label-shape'
            });
            group.addShape('text', {
              attrs: {
                text: `${cfg.content}\n${cfg.content}1`,
                fill: '#fff',
                fontSize: 6,
                x: -35,
                y: 10,
              },
              draggable: true,
              name: 'label-shape2'
            });
            group.addShape('image', {
              attrs: {
                width: 10,
                height:10,
                x: 24,
                y: -6,
                img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
              },
              // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
              name: 'image-shape',
            });
            return keyShape;
          }
        });
        
        // other node othernode
        G6.registerNode('othernode', {
          draw: (cfg, group) => {
            const size = [80, 50];
            const keyShape = group.addShape('rect', {
              attrs: {
                width: size[0],
                height: size[1],
                x: -size[0] / 2,
                y: -size[1] / 2,
                fill: 'green',
                radius: 4,
                shadowOffsetX: 4,
                shadowOffsetY: 4,
                shadowColor: '#eee',
                shadowBlur: 4,
              },
              draggable: true,
              name: 'root-keyshape'
            });
            group.addShape('rect', {
              attrs: {
                fill: '#fff',
                width: size[0],
                height: size[1]/4,
                x: -size[0] / 2,
                y: -size[1] / 2,
                radius: [4, 4, 0, 0]
              },
              draggable: true,
              name: 'ratio-shape'
            });
            group.addShape('text', {
              attrs: {
                text: `字段：${cfg.filed}`,
                fill: '#000',
                fontSize: 6,
                x: -35,
                y: -15,
              },
              draggable: true,
              name: 'label-shape'
            });
            group.addShape('text', {
              attrs: {
                text: `${cfg.content}\n${cfg.content}1`,
                fill: '#fff',
                fontSize: 6,
                x: -35,
                y: 8,
              },
              draggable: true,
              name: 'label-shape2'
            });
            group.addShape('image', {
              attrs: {
                width: 10,
                height:10,
                x: 24,
                y: -8,
                img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
              },
              // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
              name: 'image-shape',
            });
            return keyShape;
          }
        });
        
        // edge
        G6.registerEdge('round-poly', {
          getControlPoints: (cfg) => {
            const { startPoint, endPoint } = cfg;
            return [
              startPoint,
              {
                x: startPoint.x,
                y: endPoint.y
              },
              endPoint
            ];
          }
        }, 'polyline')
        
        const data = {
          id: 'root',
          label: '系统业务',
          content: 'work_timework',
          subLabel: '3,283.456',
          filed: 'work_time',
          ratio: 3,
          children: [{
            id: 'child-a',
            label: '系统业务1',
            content: 'work_timework',
            subLabel: '3,283.456',
            filed: 'work_time',
            ratio: 1,
            increase: true,
          }, {
            id: 'child-b',
            label: '系统业务2',
            content: 'work_timework',
            subLabel: '3,283.456',
            filed: 'work_time',
            ratio: 23,
            increase: true,
            children: [{
              id: 'child-b-a',
              label: '系统业务3',
            content: 'work_timework',
            subLabel: '3,283.456',
            filed: 'work_time',
              ratio: 17,
              increase: true,
              operator: '-',
            }, {
              id: 'child-b-b',
              label: '系统业务5',
            content: 'work_timework',
            subLabel: '3,283.456',
            filed: 'work_time',
              subLabel: '595,557',
              ratio: 12,
              increase: true,
            }
            ]
          }, {
            id: 'child-c',
            label: '系统业务7',
            content: 'work_timework',
            subLabel: '3,283.456',
            filed: 'work_time',
            ratio: 23,
            increase: false,
          }
          ]
        };
        
        G6.Util.traverseTree(data, subtree => {
          if (subtree.level === undefined) subtree.level = 0;
          subtree.children?.forEach(child => child.level = subtree.level + 1);
          switch (subtree.level) {
            case 0:
              subtree.type = 'root';
              break;
            case 1:
              subtree.type = 'level1node';
              break;
            default:
              subtree.type = 'othernode';
          }
        });
        
        const graph = new G6.TreeGraph({
          container: 'mountNode',
          width: 600,
          height: 500,
          fitView: true,
          layout: {
            type: 'compactBox',
            direction: 'LR',
            getHGap: function getVGap() {
              return 5;
            },
          },
          defaultEdge: {
            type: 'round-poly',
            sourceAnchor: 0,
            targetAnchor: 1,
            style: {
              radius: 8,
              stroke: 'rgb(19, 33, 92)'
            }
          },
          defaultNode: {
            anchorPoints: [
              [0.9, 0.5],
              [0, 0.5]
            ]
          },
          nodeStateStyles: {
            hover: {
              fill: '#fff',
              shadowBlur: 30,
              shadowColor: '#ddd',
            },
            operatorhover: {
              'operator-box': {
                opacity: 1
              }
            }
          },
          modes: {
            default: ['zoom-canvas', 'drag-canvas', 'collapse-expand']
          }
        });
        
        graph.on('node:mouseenter', e => {
          if (e.target.get('name')?.includes('operator')) {
            graph.setItemState(e.item, 'operatorhover', true);
          } else {
            graph.setItemState(e.item, 'hover', true);
          }
        })
        graph.on('node:mouseleave', e => {
          graph.setItemState(e.item, 'operatorhover', false);
          graph.setItemState(e.item, 'hover', false);
        });
        
        graph.data(data);
        graph.render();
    }
}